<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisibleRolesToUserChild"
      :close-on-click-modal="false"
      @close="handleCloseUserModifyClose"
    >
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;" />
      <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">
        <el-checkbox border v-for="role in rolesToUserChildList.roles" :key="role.idStr" :disabled="role.disabled" :label="role.idStr">{{ role.sysRoleName }}</el-checkbox>
      </el-checkbox-group>
      <el-form label-width="80px">
        <el-button type="danger" :loading="rolesToUserLoading.loading" round @click="submitFormRolesToUser()">授权</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { rolesToUser } from '@/api/momo/SysEnterprise'
import { success } from '@/utils/tip'
export default {
  name: 'RolesToUser',
  props: {
    rolesToUserChild: {}
  },
  data() {
    return {
      dialogFormVisibleRolesToUserChild: false,
      rolesToUserChildList: {},
      enterpriseUuid: '',
      title: '',
      rolesToUserLoading: {
        loading: false,
        uuid: ''
      },
      checkAll: false,
      isIndeterminate: true,
      checkedRoles: [],
      rolesOptions: [],
      sysUser: {}
    }
  },
  watch: {
    rolesToUserChild: {
      deep: true,
      immediate: false,
      handler() {
        this.dialogFormVisibleRolesToUserChild = true
        const data = this.rolesToUserChild
        this.sysUser = data.user
        this.enterpriseUuid = data.enterpriseUuid
        this.title = '正在为用户[' + this.sysUser.sysUserName + ']授权角色'
        this.rolesToUserChildList = data.res
        this.checkedRoles = data.res.checkList
        this.rolesToUserChildList.roles.forEach(role => {
          this.rolesOptions.push(role.id)
        })
      }
    }
  },
  methods: {
    submitFormRolesToUser() {
      this.rolesToUserLoading.loading = true
      const rolesToUserData = {
        enterpriseUuid: this.enterpriseUuid,
        uuid: this.sysUser.uuid,
        roleIds: this.checkedRoles
      }
      rolesToUser(rolesToUserData).then(res => {
        res = res.data
        success(res)
        this.dialogFormVisibleRolesToUserChild = false
        this.rolesToUserLoading.loading = false
        this.$emit('rolesToUserFather', {})
      }).catch(errored => {
        this.rolesToUserLoading.loading = false
      })
    },
    handleCheckAllChange(val) {
      console.log(this.rolesOptions)
      this.checkedRoles = val ? this.rolesOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      this.checkedRoles = value
      const checkedCount = value.length
      this.checkAll = checkedCount === this.rolesOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.rolesOptions.length
    },
    resetFormUserModify(formName) {
      this.ruleFormUserModify.remark = ''
      this.$refs[formName].resetFields()
    },
    handleCloseUserModify() {
      // this.dialogFormVisibleUserModify = false
      // this.$emit('userModifyToFather', '我是孩子')
    },
    handleCloseUserModifyClose() {
      // this.dialogFormVisibleUserModify = false
      // this.$emit('userModifyToFather', '我是孩子')
    }
  }
}
</script>

<style scoped>

</style>
